<template>
  <div class="remark">
    <Header left="arrow" title="备注"></Header>
    <van-field
      v-model="message"
      rows="6"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="口味、包装等要求"
      show-word-limit
    >
      <template #right-icon>
        <van-icon @click="clearMessage()" name="clear" /> </template
    ></van-field>
    <div class="quick_input">
      <div class="title font14g">快捷输入</div>
      <div class="quick_items">
        <div
          class="quick_item"
          v-for="(item, index) in quickInputs"
          :key="index"
          @click="addMessage(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div
      @click="submit"
      class="btn"
      :class="{ unactive: message == '' || unSubmit }"
    >
      提交
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Vue from "vue";
import { Field, Icon, Toast } from "vant";

Vue.use(Field).use(Icon).use(Toast);
export default {
  name: "orderDetail",
  components: {
    Header,
    Location,
  },
  data() {
    return {
      message: "",
      quickInputs: [
        "封口贴封紧，封口贴封紧，封口贴封紧，封口贴封紧，封口贴封紧，封口贴封紧，封口贴封紧",
        "打包",
        "不打包",
        "封口贴封紧",
      ],
      unSubmit: false,
      orderData: this.$store.getters.orderData,
    };
  },
  mounted() {
    if (this.$store.getters.orderData.remark != "口味、包装等要求") {
      this.message = this.$store.getters.orderData.remark;
    } else {
      this.message = "";
    }
  },
  methods: {
    clearMessage() {
      this.message = "";
    },
    addMessage(item) {
      if (this.message == "" || this.message == undefined) {
        this.message = item;
      } else {
        this.message += "，" + item;
      }
    },
    submit() {
      if (!(this.message == "" || this.unSubmit)) {
        this.unSubmit = true;
        this.orderData.remark = this.message;
        this.$store.dispatch("setOrder", this.orderData);
        Toast("提交成功");
        this.$router.go(-1);
      } else {
        Toast("不可提交");
      }
    },
  },
};
</script>

<style scoped>
.remark {
  padding-top: 2.13rem;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: scroll;
  background-color: #fff;
}
::v-deep .van-field__right-icon {
  margin-right: -0.21333rem;
  margin-top: -3.2rem;
  padding: 0 0.21333rem;
  line-height: inherit;
}
::v-deep .van-cell {
  background-color: #f6f6f6;
  margin: 0.5rem;
  width: 9rem;
  border-radius: 5px;
}
.quick_input {
  display: flex;
  flex-direction: column;
  margin: 0 0.5rem;
}
.quick_input .title {
  text-align: left;
  margin-bottom: 0.5rem;
}
.quick_input .quick_items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.quick_input .quick_items .quick_item {
  border: 1px solid #d1d1d1;
  padding: 0.1rem 0.2rem;
  margin: 0 0.3rem 0.3rem 0;
  border-radius: 5px;
}
.btn {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 3rem;
  text-align: center;
  border-radius: 5px;
  height: 1.3rem;
  line-height: 1.3rem;
  background-color: #333;
  color: #fff;
  font-size: 14px;
}
.unactive {
  opacity: 0.3;
}
</style>